<template>
    <el-table :data="tableData" style="width: 100%">
    <el-table-column type="index"  />
    <el-table-column prop="username" label="姓名" width="180" />
    <el-table-column prop="mobile" label="手机号" width="180" />
    <el-table-column prop="email" label="邮箱" />
    <el-table-column prop="gender" label="性别" width="120"/>
    <el-table-column fixed="right" label="操作" min-width="180">
      <template #default>
        <el-button size="small" @click="handleClick">编辑</el-button>
        <el-button type="danger" size="small">删除</el-button>
      </template>
    </el-table-column>
    </el-table>
  <el-pagination background layout="prev, pager, next" :total="config.total" @current-change="changePage"/>
  </template>
  
  <script  setup>
  import { isTemplateNode } from '@vue/compiler-core';
import { reactive,ref } from 'vue';
  import { userApi } from '../../api/user'
  const handleClick = () => {
    console.log('click')
  }
  // 定义数组 存放管理管信息
  const tableData = ref([])
  // console.log('tableData2',tableData2);
  const config = reactive({
    total:0,
    page:1
  })
  
  // 调用用户列表接口
  userApi(config).then(res=>{
    console.log('res',res.data.paginate)
    let arr = res.data.paginate.data
    console.log('arr',arr);
    tableData.value = arr
    config.total = res.data.paginate.last_page
    // console.log('config',config.total);
    console.log('tableData',tableData.value);
  })
  const changePage = (page)=>{
    // console.log(page);
    config.page = page
  }
  </script>
  <style scoped lang="scss">
  .el-pagination .is-background{
    text-align: center;
  }
  </style>